কোন এলিমেন্টের টেক্সটের উপর ইউজার মাউস পয়েন্টার নিয়ে গেলে টেক্সট সম্পর্কে অতিরিক্ত কোন তথ্য দেখানোকে টুলটিপ বলে। যেমনঃ
উপরে টুলটিপ টেক্সট
ডানে টুলটিপ টেক্সট
নিচে টুলটিপ টেক্সট
বামে টুলটিপ টেক্সট
একটি টুলটিপ তৈরি করার পদ্ধতিঃ
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
border-bottom: 1px dotted black;
display: inline-block;
position: relative;
}
.tooltip .tooltiptext {
background-color: teal;
border-radius: 6px;
color: white;
padding: 5px 0;
position: absolute;
text-align: center;
visibility: hidden;
width: 120px;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<head>
<body style="text-align:center;">
<p>নিচের টেক্সটে মাউস আনুনঃ</p>
<div class="tooltip">মাউস আনুন
<span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>
</body>
</html>
এইচটিএমএলঃ
একটি কন্টেইনার এলিমেন্ট হিসেবে < div> এলিমেন্টকে ব্যবহার করা হয়েছে এবং এতে "tooltip" ক্লাসটি যোগ করা হয়েছে।
span এলিমেন্টে class="tooltiptext" ব্যবহার করা হয়েছে এবং টুলটিপ টেক্সট রাখা হয়েছে।
সিএসএসঃtooltipক্লাসটিতে position:relative ব্যবহার করা হয়েছে। কারণ আমরা টুলটিপ টেক্সটের অবস্থান নির্ধারণের ক্ষেত্রে position:absolute ব্যবহার করবো।
tooltiptext ক্লাসটির মাধ্যমে টুলটিপ টেক্সটকে হাইড করা হয়েছে এবং টুলটিপ টেক্সটের আরো কিছু স্টাইল করা হয়েছে।
class="tooltip" যুক্ত <div> এলিমেন্টে :hover সিলেক্টরটি যোগ করা হয়েছে। এর ফলে আমরা <div> এলিমেন্টের উপর মাউস নিয়ে গেলে .tooltiptext ক্লাসের visibility প্রোপার্টির ভ্যালু visible সেট হয়ে যাবে।
এই উদাহরণে, আমরা টুলটিপ টেক্সটকে ডান পাশে দেখানোর জন্য left:105% ব্যবহার করেছি এবং টুলটিপ টেক্সটকে হোভারএবল টেক্সটের মাঝামাঝি দেখানোর জন্য top:-5px ব্যবহার করেছি।
আপনি যদি টুলটিপ টেক্সটের প্যাডিংয়ের ভ্যালু বাড়ান অথবা কমান তাহলে, top প্রোপার্টির ভ্যালুতেও একই মান ব্যবহার করতে হবে। একই মান ব্যবহার না করলে টুলটিপ টেক্সট মাঝামাঝি থাকবে না।
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
border-bottom: 1px dotted black;
display: inline-block;
position: relative;
}
.tooltip .tooltiptext {
background-color: teal;
border-radius: 6px;
color: whitesmoke;
padding: 5px 0;
text-align: center;
visibility: hidden;
width: 120px;
left: 105%;
position: absolute;
top: -5px;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<head>
<body style="text-align:center;">
<h2>ডানদিকে টুলটিপ</h2>
<p>নিচের টেক্সটে মাউস আনুনঃ</p>
<div class="tooltip">মাউস আনুন
<span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>
</body>
</html>
যদি আপনি টুলটিপকে উপরে দেখাতে চান তাহলে bottom: 100% ব্যবহার করতে হবে এবং আমরা margin-left: -60px ব্যবহার করেছি টুলটিপ টেক্সটকে মাঝামাঝি দেখানোর জন্য। -৬০ পিক্সেল ব্যবহার করার কারণ টুলটিপ টেক্সটের প্রস্থ ১২০ পিক্সেল, আমরা এর প্রস্থের অর্ধেক নিয়েছি।
আপনি যদি টুলটিপ টেক্সটের প্রস্থ ১০০ পিক্সেল সেট করেন তাহলে মার্জিন সেট করতে হবে -৫০ পিক্সেল।
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
border-bottom: 1px dotted black;
display: inline-block;
position: relative;
}
.tooltip .tooltiptext {
background-color: teal;
border-radius: 6px;
color: whitesmoke;
padding: 5px 0;
text-align: center;
visibility: hidden;
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<head>
<body style="text-align:center;">
<h2>উপরেরদিকে টুলটিপ</h2>
<p>নিচের টেক্সটে মাউস আনুনঃ</p>
<div class="tooltip">মাউস আনুন
<span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>
</body>
</html>
টুলটিপ টেক্সটকে নিচেরদিকে দেখাতে চাইলে আপনাকে bottom: 100% এর পরিবর্তে top: 100% ব্যবহার করতে হবেঃ
kt_satt_skill_example_id=1149
আমরা অ্যাঁরোকে নিচেরদিকে রাখার জন্য top: 100% ব্যবহার করেছি এবং left: 50% ব্যবহার করে অ্যাঁরোকে মাঝামাঝি নিয়ে এসেছি। border-width: 5px দ্বারা অ্যাঁরোর সাইজ নির্ধারণ করা হয়েছে, অ্যাঁরোর সাইজ নির্ধারণ করার পর একে মাঝামাঝি রাখার জন্য margin-left: -5px ব্যবহার করেছি।
লক্ষণীয় বিষয় হচ্ছে উভয় প্রোপার্টির মান সমানভাবে দিতে হবে, ১০পিক্সেল বর্ডার দিলে মার্জিনও -১০পিক্সেল ব্যবহার করতে হবে। border-color: black transparent transparent transparent; সেট করতে হবে।
kt_satt_skill_example_id=1150
উপরের দিকে অ্যাঁরো দেখানোর জন্য top: 100% এর পরিবর্তে bottom: 100% ব্যবহার করতে হবে এবং border-color: transparent transparent black transparent; সেট করতে হবে।
kt_satt_skill_example_id=1153
বামদিকে অ্যাঁরো দেখানোর জন্য top: 50%, right: 100% এবং border-color: transparent black transparent transparent ব্যবহার করতে হবে।
kt_satt_skill_example_id=1156
বামদিকে অ্যাঁরো দেখানোর জন্য top: 50%, left: 100% এবং border-color: transparent transparent transparent black ব্যবহার করতে হবে।
kt_satt_skill_example_id=1161
টুলটিপ টেক্সটে এনিমেশন যোগ করার পদ্ধতি হচ্ছে transition প্রোপার্টি ও opacity প্রোপার্টির ব্যবহারঃ
kt_satt_skill_example_id=1163
Read more
or
